//个人中心-发票管理-待开票已开票
<template>
  <div class="per_invoice">
    <div class="flex-box invoice_nav fs18">
      <div class="flex-box flex-grow-1">
        <div class="nav" :class="invoiceIndex == 0 ? 'active' : ''" @click="changeInvoice(0)">
          待开票
        </div>
        <div class="nav" :class="invoiceIndex == 1 ? 'active' : ''" @click="changeInvoice(1)">
          已开票
        </div>
      </div>
      <div class="maintain normal flex-box">发票信息维护</div>
    </div>
    <ul class="order_list" v-if="invoiceIndex == 0">
      <li class="mb30" v-for="(item, index) in 5" :key="index">
        <div class="flex-box num_date">
          <div class="col9">订单号：</div>
          <div>232234334434234</div>
          <div class="pl60 col9">2020-02-02 19:19:19</div>
        </div>
        <div class="flex-box">
          <div class="goods_info flex-grow-1 flex-box">
            <img src="../assets/static/images/img_about.png" class="img_about mr20" alt="" />
            <div class="title">
              <div class="fs20 fwb">可再生能源电力项目</div>
              <div class="fs20 num">x1</div>
            </div>
          </div>
          <div class="fifteen fs28 red fwb"><span class="fs16">¥</span>2800</div>
          <div class="fifteen fs20">
            <div class="pb15 col9">已完成</div>
            <a href="javascript:;">订单详情</a>
          </div>
          <div class="fifteen">
            <div class="btns">申请发票</div>
          </div>
        </div>
      </li>
    </ul>
    <ul class="order_list" v-if="invoiceIndex == 1">
      <li class="mb30" v-for="(item, index) in 5" :key="index">
        <div class="flex-box num_date">
          <div class="col9">订单号：</div>
          <div>232234334434234</div>
          <div class="pl60 col9">2020-02-02 19:19:19</div>
        </div>
        <div class="flex-box">
          <div class="goods_info flex-grow-1 flex-box">
            <img src="../assets/static/images/img_about.png" class="img_about mr20" alt="" />
            <div class="title">
              <div class="fs20 fwb">可再生能源电力项目</div>
              <div class="fs20 num">x1</div>
            </div>
          </div>
          <div class="fifteen fs28 red fwb"><span class="fs16">¥</span>2800</div>
          <div class="fifteen fs20">
            <div class="pb15 col9">已完成</div>
            <a href="javascript:;">订单详情</a>
          </div>
          <div class="fifteen fs20 col9">电子发票</div>
          <div class="fifteen">
            <div class="btns">查看发票</div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: "invoices",
  data() {
    return {
      invoiceIndex: 0,
    };
  },
  methods: {
    changeInvoice(index) {
      this.invoiceIndex = index;
      console.log(index);
    },
  },
};
</script>
